<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件参数校验</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="app">
    <!--字符串参数-->
    <child content="component validate"></child>
    <!--数字参数-->
    <child :content="2"></child>
    <!--不传参数-->
    <child></child>
</div>
<script>
    Vue.component('child', {
        template: '<div>{{content}}</div>',
        //组件参数校验
        props: {
            //子组件接收到的content参数必须是字符串类型
            // content: String,
            // 必须是数字
            // content: Number
            // 要么是数字要么是字符串
            // content: [Number, String],
            content: {
                // 限定类型必须是字符串或数字
                type: [Number, String],
                // 表示参数必传
                required: false,
                // 设置默认值
                default: 'default value',
                // 使用自定义参数校验器
                validator: function (value) {
                    // 参数长度必须大于1
                    return (value.toString().length > 0)
                }
            }
        },

    });
    var app = new Vue({
        el: '#app',
        methods: {
            handleClick: function () {
                //this.$refs 整个vue实例中所有的引用，取出divRef引用的dom节点
                alert(this.$refs.divRef.innerHTML)
            }
        }
    });
</script>
</body>
</html>